


let [,goodsId] = location.search.substring(1).split('=');
$.get("goodsAndShoppingCart/getGoodsInfo.php",`goodsId=${goodsId}`,function(restext){
    console.log(restext);
    $('#smallbox').css({
      backgroundImage:`url(${restext.goodsImg})`
    })
    $('#bigbox').css({
        backgroundImage:`url(${restext.goodsImg})`
      })
    for(let j=0;j< $(".click").length;j++){
        let i=j;
        $('.click').eq(j).css({
            backgroundImage:`url(${restext['beiyong'+(i+1)]})`
        })
    }   
    $('.goodname').html(`${restext.goodsName}`)
    $('.goodprice').html(`${restext.goodsPrice}.00`)
},"json")








    
    
    let oSmallbox = document.getElementById('smallbox')
    let oMask = document.getElementById('mask')
    let oBigbox = document.getElementById('bigbox')
    let oLis = document.getElementsByClassName('click')
    class FDJ {
        constructor(oSmallbox, oMask, oBigbox,oLis) {
            this.oSmallbox = oSmallbox;
            this.oMask = oMask;
            this.oBigbox = oBigbox;
            this.oLis = oLis;
            this.eventbind();
        }
        mouseover() {
            let that = this;
            this.oSmallbox.onmouseover = function () {
                that.oMask.style.display = 'block';
                that.oBigbox.style.display = 'block';
            }
        }
        mouseout() {
            let that = this;
            this.oSmallbox.onmouseout = function () {
                that.oMask.style.display = 'none';
                that.oBigbox.style.display = 'none';
            }
        }
        mousemove() {
            let that = this;
            this.oSmallbox.onmousemove = function (evt) {
                let e = evt || event;
                let left = e.pageX - this.offsetLeft - that.oMask.offsetWidth / 2;
                let top = e.pageY - this.offsetTop - that.oMask.offsetHeight / 2;
                if (left < 0) {
                    left = 0;
                }
                let maxleft = this.offsetWidth - that.oMask.offsetWidth;
                if (left > maxleft) {
                    left = maxleft;
                }
                let maxtop = this.offsetHeight - that.oMask.offsetHeight;
                if (top > maxtop) {
                    top = maxtop;
                }
                if (top < 0) {
                    top = 0;
                }
                that.oMask.style.left = left + 'px';
                that.oMask.style.top = top + 'px';
                let x = left * that.oBigbox.offsetWidth / that.oMask.offsetWidth;
                let y = top * that.oBigbox.offsetHeight / that.oMask.offsetHeight;
                that.oBigbox.style.backgroundPositionX = -x + 'px';
                that.oBigbox.style.backgroundPositionY = -y + 'px';

            }


        }
        clickLi() {
            let that = this;
            for (let i = 0; i < this.oLis.length; i++) {
                this.oLis[i].onclick = function () {
                    // console.log(getComputedStyle(this, false)["backgroundImage"]);
                    that.oSmallbox.style.backgroundImage = `${getComputedStyle(this,false)['backgroundImage']}`;
                    that.oBigbox.style.backgroundImage = `${getComputedStyle(this,false)['backgroundImage']}`;
                }
            }
        }

        eventbind() {
            this.mouseover();
            this.mouseout();
            this.mousemove();
            this.clickLi();
        }

    }
    let c = new FDJ(oSmallbox, oMask, oBigbox,oLis);



// 添加购物车接口

$('.add').click(function(){
    $.post("goodsAndShoppingCart/addShoppingCart.php",`vipName=jcc&goodsId=${goodsId}&goodsCount=${$('.inp').val()}` ,function (restext) {
        console.log(restext);
        if(restext.trim()=="1"){
            location.href = 'cart.html'
        }
    });
    
})


$('.addd').click(function(){
    $('.inp').val(($('.inp').val())/1+1)
})

$('.dell').click(function(){
    if(Number(($('.inp').val()>0)))
    $('.inp').val(($('.inp').val())/1-1)
})
    